{include file='fcworker/fc_head'}
<style type="text/css">
    .og-cl{
        color: #e89716 !important;
    }
    .teamNum{
        color: #949494;
        font-size: 12px;
        width: 75px;
        height: 25px;
        line-height: 25px;
        text-align: center;
    }
    .lookteam{
        width: 75px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        color: #ffffff;
        background-color: #f4ba4e;
        padding: 5px;
    }
    .teamNumbg{
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #f4ba4e;
        position: absolute;
        margin-top: -7px;
        margin-left: 12px;
    }
    .checkBtn1{
        width: 1.4rem;
    }
    .checkBtn{
        margin-bottom: .1rem;
        width: 1.5rem !important;
        border-radius: 1.0rem;
    }
    .ckSmall{
        width: 1.0rem !important;
        border-radius: 1.0rem;
    }
    .peopleTime {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .hexiao_tips {
        font-weight: bold;
        color: #939393;
        font-size: 15px;
    }
    {if $config['ishexiao']==1 && !$system['is_multiple_merchants']}
    .numPeople li {
        width: 25%;
    }
    {/if}
    .peopleInfor{
        overflow: visible;
    }
    .peopleInfor:after{
        content: "";
        display: block;
        clear: both;
    }
    .peoPle {
        padding: .1rem 0 .1rem;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        background: #fff;
        width: 7.16rem;
        border-radius: .15rem;
        margin: 0 auto .3rem;
    }

    .notePriceBox{
        display: flex
    }
    .nodeBox{
        width: 100%;
    }
    .note_txt {
        text-align: center;
        font-size: .24rem;
        color: #949494;
        background: #f1f1f1;
        border-radius: 1rem;
        margin: 0 0.3rem 0.2rem 0.3rem;
        line-height: 0.4rem;
        padding: 0.02rem 0.35rem;
    }
    .note_txt span {
        font-size: .24rem;
        /*font-weight: bold;*/
        color: #1c1c1c;
    }
    .peopleTxt p{
        white-space: normal !important;
    }
    .layui-table-cell {
        height: auto;
        line-height: 28px;
        padding: 0 6px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        box-sizing: border-box;
    }
    .fixTop .scode1 {
        width: .56rem;
        height: .49rem;
        margin-left: .25rem;
        margin-top: .15rem;
        display: block;
        float: left;
    }
   .typeStr{
       position:absolute;
       top:50%;
       left:10%;
       transform: translate(-50%,-50%);
       color: #939393;
   }

    .maskLayer{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: none;
    }

    .pop{
        z-index:9999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        position:relative;
        width:96%;
        height:80%;
        background-color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust:none;
    }

    .pop .title{
        color: #FFF;
        cursor:default;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        text-align: left;
        padding-left: 8px;
        padding-top: 4px;
        padding-bottom: 2px;
        background-color: #2a8bee;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .pop .content{
        margin-top: 0;
    }

    .pop .title .but{
        position: absolute;
        right: 5px;
        top: 1px;
    }

    .activeTab table{
        table-layout: fixed;
    }
    .fixedTable {
        display: none;
        position: fixed;
        top:0;
        left: 0;
        z-index: 3;
        table-layout: fixed;
    }
    /*.fixedTable table {*/
    /*	table-layout: fixed;*/
    /*}*/
    .fixedTable th {
        background: #edf6ff;
        line-height: .7rem;
        font-size: .22rem;
        color: #7e7578;
    }

    .new_tr{
        height: 0.8rem !important;
        line-height: 0.8rem !important;
    }

</style>

<div class="fixTop fixPos">
    <div class="scode1"></div>
    <form action="/{php echo createMobileUrl('X_fenxiao',array('themeid'=>$themeid,'op'=>'display'));}" method="post">
        <div class="searchBox">
            <input type="text" name="keyword"  placeholder="请输入关键字" id="keyword" value="{$keyword}">
            <button type="submit" id="search_btn">搜索</button>
        </div>
    </form>
</div>

<div id="mescroll" class="mescroll">
    <div>
        <div class="container">
            <div class="numPeople">
                <ul>
                    {loop $btns $key $item}
                        <a href="javascript:void(0);" data-method="{$item['filed_type']}" data-id="{$item['filed_code']}" class="checkBtn1"><li><p>{$item['name']}</p><span>{$item['num']}</span></li></a>
                    {/loop}
                </ul>
            </div>
    </div>

    <div id="append_list">
        {if $list}
          {loop $list $key $item}
                <div class="peoPle">
                    <div class="peopleTime">
                        <div>
                            {$item['id']}.{$item['addtime']}
                        </div>
                        <div class="hexiao_tips">{$item['typename']}</div>
                </div>
                <div class="peopleInfor" style="position: relative">
                    <div class="peopleImg">
                        <img src="{$item['avatar']}">
                    </div>
                    <div class="peopleTxt" style="max-width: 5rem;width: auto !important;">
                        <h2>{$item['nickname']}</h2>
                        {if $item['user']}<p>姓名：{$item['user']}</p>{/if}
                        {if $item['workername']}<p>员工：{$item['workername']}</p>{/if}
                        <p>{$item['order_name']}：{$item['recordid']} - {$item['form_username']}</p>
                    </div>
                    <div class="re_div" style="position: absolute;right: 28px;">
                        <a href="tel:{$item['mobile']}" class="telBtn"></a>
                    </div>
                </div>

                    <div class="notePriceBox">
                        <div class="nodeBox">
                           {if $item['msg']}
                             <div class="note_txt">
                                 {$item['msg']}
                             </div>
                           {/if}
                        </div>
                        <div class="payMoneytxt">
                            <span>￥<i>{$item['fee']}</i></span>
                        </div>
                    </div>

                <div class="controlBox" style="position: relative">
                    <span class="typeStr">{$item['status_name']}</span>
                        <a href="javascript:void(0);" data-username="{$item['nickname']}" data-avatar="{$item['avatar']}" data-uid="{$item['uid']}" class="checkBtn showInfo">详情</a>
                        {if $item['bufa']}
                        <a href="javascript:void(0);" data-id="{$item['id']}" class="checkBtn changeBtn clickBufa">补发</a>
                        {/if}
                </div>
            </div>
          {/loop}
        {/if}
    </div>

    <div class="h110"></div>
    <div>
        {include file='fcworker/fc_foot'}
        <input type="hidden" name="page" id="page" value="{$page}">
        <input type="hidden" name="op" id="op" value="{$_P['op']}">
        <input type="hidden" name="hasNext" id="hasNext" value="{$hasNext}">
        <input type="hidden" name="type" id="type" value="{$type}">
        <input type="hidden" name="status" id="status" value="{$status}">
    </div>

   </div>
</div>
    <div id="show_info" class="maskLayer">
        <div class="pop mescroll-touch">
            <div class="title">
                <span id="titleStr"></span>
                <span  class="but">
                     <button class="layui-btn layui-btn-primary" type="button" id="closePop" >关闭</button>
                </span>
            </div>
            <div class="content">
                <div class="activeTab">
                    <table cellpadding="0" cellspacing="0" width="100%" id="fans_list">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>来源</th>
                            <th>类型</th>
                            <th>金额</th>
                            <th>备注</th>
                            <th>时间</th>
                        </tr>
                        </thead>
                        <tbody id="tableData">

                        </tbody>
                    </table>
                </div>
               <!--<table id="info_data" lay-filter="info_data"></table>-->
            </div>
        </div>
    </div>
</body>

<script type="text/html" id="index">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    const mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            callback: () => {
                mescroll.endSuccess();
                setTimeout(() => {
                    window.location.reload();
                },500)
            }
        },
        up: {
            use: true,
            auto: false,
            isBounce: false,
            callback: (page) => {
                let pageNum = page.num+1;
                let type = $("#type").val();
                let status = $('#status').val();
                let keyword =  $("#keyword").val();
                let postUrl="/{php echo createMobileUrl('X_fenxiao',array('themeid'=>$themeid));}";
                $.ajax({
                    url:postUrl,
                    dataType:'json',
                    method:'post',
                    data: {page:pageNum,op:'display',keyword:keyword,type:type,status:status},
                    success:function (e) {
                        let data = e.data;
                        let error = e.error;
                        let msg = e.msg;
                        let curPageData = data.list; // 接口返回的当前页数据列表
                        if (error!=0){
                            layer.msg(msg);
                        }else {
                            if (curPageData) {
                                for (var i = 0; i < curPageData.length; i++) {
                                    var newObj = curPageData[i]
                                    var appendHtml = `
                                    <div class="peoPle">
                                        <div class="peopleTime">
                                            <div>
                                                ${newObj.id}.${newObj.addtime}
                                            </div>
                                            <div class="hexiao_tips">${newObj.typename}</div>
                                        </div>
                                        <div class="peopleInfor" style="position: relative">
                                            <div class="peopleImg">
                                                <img src="${newObj.avatar}">
                                            </div>
                                            <div class="peopleTxt" style="max-width: 5rem;width: auto !important;">
                                                <h2>${newObj.nickname}</h2>
                                                ${newObj.user?`<p>姓名：${newObj.user}</p>`:''}
                                                ${newObj.workername?`<p>员工：${newObj.workername}</p>`:''}
                                                <p>${newObj.order_name}：${newObj.recordid} - ${newObj.form_username}</p>
                                            </div>
                                            <div class="re_div" style="position: absolute;right: 28px;">
                                                <a href="tel:${newObj.mobile}" class="telBtn"></a>
                                            </div>
                                        </div>
                                        <div class="notePriceBox">
                                            <div class="nodeBox">`;
                                                if(newObj.msg){
                                                    appendHtml +=  ` <div class="note_txt">${newObj.msg}</div>`;
                                                  }
                                       appendHtml +=  `
                                              </div>
                                              <div class="payMoneytxt">
                                                    <span>￥<i>${newObj.fee}</i></span>
                                              </div>
                                        </div>

                                        <div class="controlBox" style="position: relative">
                                                <span class="typeStr">${newObj.status_name}</span>
                                                <a href="javascript:void(0);" data-username="${newObj.nickname}" data-avatar="${newObj.avatar}"  data-uid="${newObj.uid}" class="checkBtn showInfo">详情</a>
                                                ${newObj.bufa ? `<a href="javascript:void(0);" data-id="${newObj.id}" class="checkBtn changeBtn clickBufa">补发</a>`: ''}
                                        </div>
                                   </div>`;
                                    $("#append_list").append(appendHtml);
                                }
                                // layer.closeAll();
                            }
                            // loadingState = false;
                            if (data.hasNext) {
                                hasNext = 1;
                            } else {
                                hasNext = 0;
                            }
                            $("#hasNext").val(hasNext);
                            mescroll.endSuccess(curPageData.length, hasNext);
                        }
                    },
                    fail:function (err) {
                        console.log(err)
                    }
                });
            }
        }
    })

    if(!$("#hasNext").val()) {
        mescroll.lockUpScroll(true);
    }

    var loadingState= false;
    var hasNext = 1;
    $('.backTop').click(function(){
        $('body,html').animate({scrollTop:0},500);
    });

    $('.numPeople').on('click','.checkBtn1',function (e) {
        var id = this.dataset.id;
        var method = this.dataset.method;
        var jump_url ='{php echo "/".createMobileUrl("X_fenxiao",array("themeid"=>$themeid));}'+'&'+method+'='+id;
        self.location.href=jump_url;
    });
    //
    $("#append_list").on("click",'.clickBufa',function () {
        var id = this.dataset.id;
        var postUrl= '{php echo "/".createMobileUrl("X_fenxiao",array("themeid"=>$themeid,"op"=>"check"));}';
        $.ajax({
            url:postUrl,
            dataType:'json',
            method:'post',
            data: {id:id},
            success:function (e) {
                let error = e.error;
                let msg = e.msg;
                if(error==1){
                     layer.msg(msg);
                     return false;
                }else{
                    layer.msg(msg,{time:2000},function(){
                        window.location.reload();
                    });
                }
            },
            fail:function (err) {
                layer.msg(err);
            }
        });
    });
    //关闭
    var mo=function(e){e.preventDefault();};
    function closePop(){
         $('#show_info').hide();
         document.body.style.overflow = 'auto'; // 弹层不显示时
         document.body.style.position = null;
        //mescroll.lockDownScroll(false);
    }

    $('.maskLayer').click(function(){
         closePop();
    });

    $('.pop').on('click', function(event) {
         event.stopPropagation();
    });

    $('#closePop').on('click',function(event){
         closePop();
    })

    layui.use(['form','table'], function(){
        var table = layui.table;
        $('.numPeople').on('click','.checkBtn1',function (e) {
            var id = this.dataset.id;
            var method = this.dataset.method;
            var jump_url ='{php echo "/".createMobileUrl("X_fenxiao",array("themeid"=>$themeid));}'+'&'+method+'='+id;
            self.location.href=jump_url;
        });

        $("#append_list").on("click",'.showInfo',function () {
            $('#show_info').show();
           // mescroll.lockDownScroll(true);
            document.body.style.overflow = 'hidden';      //弹层显示时
            document.body.style.position = 'relative';
            var showInfo = $('#show_info');
            var width = showInfo[0].offsetWidth;
            var height = showInfo[0].offsetHeight;
            var uid = this.dataset.uid;

            var username = this.dataset.username;
            var avatar = this.dataset.avatar;
            $('#titleStr').html(`<img src='${avatar}' class='layui-nav-img'>${username}`);
            var tableUrl= '{php echo "/".createMobileUrl("X_fenxiao",array("themeid"=>$themeid,"op"=>"info"));}';
            $.ajax({
                url:tableUrl,
                dataType:'json',
                method:'post',
                data: {uid:uid},
                success:function (e) {
                    var curPageData = e.data;
                    if (curPageData) {
                        var appendHtml = '';
                        for (var i = 0; i < curPageData.length; i++) {
                            var newObj = curPageData[i]
                            appendHtml += `<tr class="new_tr">
                                                <td>${i+1}</td>
                                                <td>${newObj.form_username}</td>
                                                <td>${newObj.typename}</td>
                                                <td>${newObj.fee}</td>
                                                <td>${newObj.msg}</td>
                                                <td>${newObj.addtime}</td>
                                            </tr>`;
                        }
                        $("#tableData").html(appendHtml);
                    }
                },
                fail:function (err) {
                    layer.msg(err);
                }
            });
        });
    });
</script>
</html>
